<template lang="pug">
.cart-control-wrapper
  transition(name='move')
    .decrease(v-show="production.count>0" @click.stop.prevent="decrease")
      span.icon.iconfont.iconminus
  .count(v-show="production.count>0") {{production.count}}
  .add(@click.stop.prevent="add")
    span.icon.iconfont.iconadd
</template>

<script>
export default {
  props: {
    production: {
      type: Object,
      default: {}
    }
  },

  methods: {

    // 点击添加按钮事件
    add(event) {
      console.log('add')
      // 增加选中商品数量
      if(!this.production.count){
        this.$set(this.production,'count',1)
      }else {
        this.production.count++
      }
      // 将触发点击事件的DOM对象(添加按钮)传给父组件
      this.$emit('addEvent',event.target)

      event.stopPropagation()
    },

    // 点击减少按钮事件
    decrease() {
      // 减少选中商品数量
      if(this.production.count){
        this.production.count--
      }
    }
  }
}
</script>

<style lang="stylus">
@import "../../static/common/stylus/variable";

.cart-control-wrapper
  height:24px
  .add
    display:inline-block
    vertical-align:top
    line-height:24px
    .icon
      font-size:24px
      color:$color-blue
  .decrease
    display:inline-block
    vertical-align:top
    line-height:24px
    .icon
      display:inline-block
      font-size:24px
      color:$color-blue
      transition:all 0.6s linear
      // block元素才能旋转
      transform: rotate(0deg)
    &.move-enter-active,&.move-leave-active
      transition:all 0.6s linear
    &.move-enter,&.move-leave-to
      opacity:0
      transform:translate(30px,0)
      .icon
        transform:rotate(180deg)
  .count
    display:inline-block
    vertical-align:top
    font-size:20px
    line-height:24px
    width:30px
    text-align:center
    
</style>
